<template>
    <basic-container>
        <el-form ref="queryForm"
                 :model="queryParams"
                 :inline="true"
                 label-width="80px">
            <el-form-item label="字典类型"
                          prop="searchParams.search_eq_dictType">
                <el-select v-model="queryParams.searchParams.search_eq_dictType" filterable placeholder="请选择" @change="selectChange">
                    <el-option
                            v-for="dict in dictTypeOptions"
                            :key="dict.dictType"
                            :label="dict.dictName"
                            :value="dict.dictType">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="使用状态"
                          prop="searchParams.search_eq_status">
                <el-select v-model="queryParams.searchParams.search_eq_status" placeholder="请选择">
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-search"
                           size="mini"
                           @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh"
                           size="mini"
                           @click="resetQuery">重置
                </el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10"
                class="mb8">
            <el-col :span="1.5">
                <el-button type="primary"
                           icon="el-icon-plus"
                           size="mini"
                           @click="handleAdd"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="success"
                        icon="el-icon-edit"
                        size="mini"
                        :disabled="single"
                        @click="handleUpdate"
                >编辑
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                        type="warning"
                        icon="el-icon-download"
                        size="mini"
                >导出
                </el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading"
                  :data="userList"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="ID" align="center" prop="id"/>
            <el-table-column label="字典类型" align="center" prop="dictType"/>
            <el-table-column label="字典标签" align="center" prop="fieldLabel"/>
            <el-table-column label="字典键值" align="center" prop="fieldVal"/>
            <el-table-column label="使用状态"
                             align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status"
                               :active-value="0"
                               :inactive-value="1"
                               @change="handleStatusChange(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="remark" :formatter="dFormat">
            </el-table-column>
            <el-table-column label="操作"
                             align="center"
                             class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="small"
                               type="text"
                               icon="el-icon-edit"
                               @click="handleUpdate(scope.row)"
                    >编辑
                    </el-button>
                    <el-button size="small"
                               type="text"
                               icon="el-icon-delete"
                               class="deleteBtn"
                               @click="handleDelete(scope.row)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>


        <!-- 添加或编辑收费员信息对话框 -->
        <el-dialog :title="title[statusDialog]"
                   :visible.sync="open"
                   width="40%"
                   append-to-body
                   :close-on-click-modal="false">
            <el-form ref="form"
                     :model="form"
                     :rules="rules"
                     label-width="80px">
                <el-form-item label="字典类型"
                              prop="dictType">
                    <el-input v-if="statusDialog=='add'" v-model="queryParams.searchParams.search_eq_dictType"
                              placeholder="请输入字典类型" disabled/>
                    <el-input v-else-if="statusDialog=='edit'" v-model="form.dictType"
                              placeholder="请输入字典类型" disabled/>
                </el-form-item>
                <el-form-item label="字典标签"
                              prop="fieldLabel">
                    <el-input v-model="form.fieldLabel"
                              placeholder="请输入字典名称"/>
                </el-form-item>
                <el-form-item label="字典键值"
                              prop="fieldVal">
                    <el-input v-model="form.fieldVal"
                              placeholder="请输入字典名称"/>
                </el-form-item>
                <el-form-item label="使用状态" prop="status" v-if="statusDialog=='edit'">
                    <el-radio-group v-model="form.status">
                        <el-radio v-for="dict in statusOptions"
                                  :key="dict.dictValue"
                                  :label="dict.dictValue">{{dict.dictLabel}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序"
                              prop="orderAsc">
                    <el-input-number v-model="form.orderAsc" :min="1" :max="100"
                                     label="描述文字"></el-input-number>
                </el-form-item>

            </el-form>
            <div slot="footer"
                 class="dialog-footer">
                <el-button type="primary"
                           @click="submitForm">确 定
                </el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


    </basic-container>
</template>

<script>
    import {
        addDataInfo,
        delDataInfo,
        getTypeData,
        listDataInfo,
        startDataInfo,
        updateDataInfo
    } from "@/api/system/dict/data";
    import {dateFormat} from '@/util/date'

    export default {
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,
                // 用户信息表格数据
                userList: [],
                // 弹出层标题
                title: {
                    add: '新增字典',
                    edit: '编辑字典',
                },
                statusDialog: "",
                // 是否显示弹出层
                open: false,
                statusOptions: [],
                dictTypeOptions: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    searchParams:{
                        search_eq_dictType: undefined,
                        search_eq_status: undefined,
                    }
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    fieldLabel: [
                        {required: true, message: "字典标签不能为空", trigger: "blur"}
                    ],
                    fieldVal: [
                        {required: true, message: "字典键值不能为空", trigger: "blur"}
                    ],
                    status: [
                        {required: true, message: "状态不能为空", trigger: "blur"}
                    ],
                }
            }

        },
        created() {
            this.getList();
            this.getDicts("sys_status").then(response=>{
                this.statusOptions =response.data.data;
            });
            this.queryParams.searchParams.search_eq_dictType = this.$route.query.dictType;
            getTypeData().then(response => {
                this.dictTypeOptions = response.data.data;
            });
        },
        methods: {
            /** 搜索按钮操作 */
            handleQuery() {
                for (let key in this.queryParams.searchParams) {
                    if(this.queryParams.searchParams[key]!=undefined){
                        if (this.queryParams.searchParams[key] == "") {
                            this.queryParams.searchParams[key] = undefined;
                            continue;
                        }
                        if(this.queryParams.searchParams[key].length>0){
                            if(!this.queryParams.searchParams[key].constructor == Array){
                                if(!(this.queryParams.searchParams[key].replace(" ", "").trim().length > 0)){
                                    this.queryParams.searchParams[key] = undefined;
                                    continue;
                                }
                            }
                        }
                    }
                }
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    dictType: undefined,
                    fieldLabel: undefined,
                    fieldVal: undefined,
                    status: "0",
                    orderAsc: 1,
                    createTime: undefined,
                    createBy: undefined,
                    updateTime: undefined,
                    updateBy: undefined
                };
                this.resetForm("form");
            },
            /** 查询收费员信息列表 */
            getList() {
                this.loading = true;
                listDataInfo(this.queryParams).then(response => {
                    const data = response.data.data;
                    this.userList = data.rows;
                    this.total = data.total;
                    this.loading = false;
                });
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                // this.ids = selection;
                this.single = selection.length != 1;
                this.multiple = !selection.length;
            },

            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.statusDialog = 'add';
            },
            /** 编辑按钮操作 */
            handleUpdate(row) {
                if (row.id) {
                    this.form = JSON.parse(JSON.stringify(row));
                } else {
                    this.form = JSON.parse(JSON.stringify(this.ids[0]));
                }
                this.form.status = this.form.status + "";
                this.open = true;
                this.statusDialog = 'edit';
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != undefined) {
                            updateDataInfo(this.form).then(response => {
                                const data = response.data;
                                if (response.status === 200 && data.code === "00") {
                                    this.msgSuccess("编辑成功");
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(response.msg);
                                }
                            });
                        } else {
                            this.form.dictType=this.queryParams.searchParams.search_eq_dictType;
                            addDataInfo(this.form).then(response => {
                                const data = response.data;
                                if (response.status === 200 && data.code === "00") {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(response.msg);
                                }
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const userIds = row.id || this.ids;
                let tt = '';
                if (row.id == undefined) {
                    tt = '是否确认删除【' + this.ids.length + '】条数据吗?';
                } else {
                    tt = '是否确认删除为"' + row.fieldLabel + '"的数据项?';
                }
                this.$confirm(tt, "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delDataInfo(userIds);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(function () {
                });
            },
            // // 用户状态编辑
            handleStatusChange(row) {
                startDataInfo(row).then(response => {
                    let msg = response.data.msg;
                    this.msgSuccess(msg);
                });
            },
            selectChange(value) {
                this.queryParams.searchParams.search_eq_dictType = value;
                this.getList();
            },
            dFormat(row) {
                if (row.createTime == null) {
                    return "/";
                }
                return dateFormat(new Date(row.createTime));
            }
        }
    };
</script>

<style>

</style>
